<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1"> 
	//告诉浏览器通过视口解析，有可能有手机端，自适应手机端，等比例缩放，宽度可写死（适合网页像APP的;   手机屏幕最小是320）
	视口高度定死（一般用于游戏）
	initial-scale 屏幕初始缩放值/缩放比例 (0-10)  user-scalable等于no不能缩放
	row 表示行
	col-xs-12 在超小屏幕12栅格占一行  col-sm-6 在平板屏幕上两个并排显示
	offset 列偏移    clerafix  清除浮动的类
	<title>Layabox</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<style>
		.row > div {
			height: 50px;
		}
		.row > div:nth-child(1) {
			background-color: lightblue;
		}
		.row > div:nth-child(2) {
			background-color: lightsalmon;
		}
		.row > div:nth-child(3) {
			background-color: lightpink;
		}
		.row .test > div {
			height: 25px;
			background-color: lightseagreen;
		}
		.row .test > div:nth-child(1) {
			height: 30px;
			background-color: lightseagreen;
		}
	</style>
</head>
<body>
	<header>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-6">No.1</div>
				<div class="col-xs-12 col-sm-6">
					<div class="row test">
						<div class="col-xs-2">Ha.1</div>
						<div class="col-xs-2">Ha.2</div>
						<div class="col-xs-2">Ha.3</div>
						<div class="col-xs-2">Ha.4</div>
						<div class="col-xs-2">Ha.5</div>
						<div class="col-xs-2">Ha.6</div>
						<div class="clearfix"></div>
						<div class="col-xs-2">Ha.1</div>
						<div class="col-xs-2">Ha.2</div>
						<div class="col-xs-2">Ha.3</div>
						<div class="col-xs-2">Ha.4</div>
						<div class="col-xs-2">Ha.5</div>
						<div class="col-xs-2">Ha.6</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	<script scr="js/jquery.js"></script>
	<script scr="js/bootstrap.js"></script>
</body>
</html>